<template>
  <BaseCard class="h-full" :showHeadBorder="false">
    <template #header>
      <div class="flex justify-between">
        <span class="title">业务统计</span>
      </div>
    </template>
    <div class="h-[270px]">
      <el-row :gutter="15" justify="space-evenly">
        <el-col :span="10">
          <chart :option="option" height="270px" />
        </el-col>
        <el-col :span="10">
          <chart :option="option2" height="270px" />
        </el-col>
      </el-row>
    </div>
  </BaseCard>
</template>

<script setup>
import BaseCard from "./BaseCard.vue";
import chart from "@/components/chart/index";
import * as homeApi  from "@/api/home/index";
import * as echarts from "echarts";
const option = ref({
  title: {
    text: "本年度学院科研经费TOP5",
    subtext: "(按立项经费)",
    left: "center",
    //top:20,
    textStyle: {
      fontSize: 14,
      color: "#333",
      fontWeight: "normal",
    },
    subtextStyle: {
      fontSize: 14,
      color: "#333",
    },
  },
  legend: {
    orient: "vertical",
    left: "right",
    align: "left",
    itemWidth: 30,
    itemHeight: 10,
    data: ["立项费用", "到账费用"],
    textStyle: {
      color: "#6E7079",
    },
  },
  grid: {
    show: true,
    left: 0,
    top: 60,
    bottom: 0,
    right: 0,
    containLabel: true
  },
  tooltip: {
    show: true,
  },
  xAxis: {
    splitLine: {
      show: true, //分割线
    },
    axisLine: {
      show: false, //坐标轴
    },
    axisTick: {
      show: false, //坐标刻度
    },
    data: ["中医院", "附属医院", "基础医学部"],
  },
  yAxis: {
    name: "(万元)",
    splitLine: {
      show: true,
    },
  },
  series: [
     {
      name: "立项费用",
      type: "bar",
      barWidth: 12,
      itemStyle: {
        borderRadius: 5,
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
          [
            { offset: 0, color: "#21AAFF" }, // 0% 处的颜色
            { offset: 1, color: "#4ADEFF" }, // 100% 处的颜色
          ]
        ),
      },
      data: [10, 10, 20],
    },
    {
      name: "到账费用",
      type: "bar",
      barWidth: 12,
      barGap: "100%",
      itemStyle: {
        borderRadius: 5,
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
          [
            { offset: 0, color: "#E26F72" }, // 0% 处的颜色
            { offset: 1, color: "#FE898B" }, // 100% 处的颜色
          ]
        ),
      },
      data: [5, 20, 36],
    },
   
  ],
});
const option2 = ref({
  title: {
    text: "项目立项数量",
    left: "center",
    // top:20,
    textStyle: {
      fontSize: 14,
      color: "#333",
      fontWeight: "normal",
    },
  },
  legend: {
    orient: "vertical",
    left: "right",
    align: "left",
    itemWidth: 30,
    itemHeight: 10,
    data: ["立项项目"],
    textStyle: {
      color: "#6E7079",
    },
  },
  grid: {
    show: false,
    left: 0,
    top: 60,
    bottom: 0,
    right: 0,
    containLabel: true
  },
  tooltip: {
    show: true,
  },
  xAxis: {
    splitLine: {
      show: false, //分割线
    },
    axisLine: {
      show: false, //坐标轴
    },
    axisTick: {
      show: false, //坐标刻度
    },
    data: ["纵向项目", "横向项目", "校级项目"],
  },
  yAxis: {
    name: "(项)",
    splitLine: {
      show: true,
    },
  },
  series: [
    {
      name: "立项项目",
      type: "bar",
      barGap: "100%",
      barMaxWidth: 50,
      itemStyle: {
        color: "#6395F9",
      },
      data: [5, 20, 1555],
    },
  ],
});
const  ProjectNumList=ref([])
const  feeList=ref([])
onMounted(async() => {


//项目数据
let CountProjectNumRes= await homeApi.getCountProjectNum()
if(CountProjectNumRes&&CountProjectNumRes.data.length>0){
 ProjectNumList.value=CountProjectNumRes.data
 option2.value.xAxis.data=ProjectNumList.value.map(item=>item.projectType)
 option2.value.series[0].data=ProjectNumList.value.map(item=>item.count)
}
//科研经费研究
let  res  =  await homeApi.businessCountFee();
if(res&&res.data.length>0){
  feeList.value=res.data
  option.value.xAxis.data= feeList.value.map(item=>item.unitName)
  option.value.series[0].data= feeList.value.map(item=>item.feeAuthorize)
  option.value.series[1].data= feeList.value.map(item=>item.incomeFee)
 
  
}
 
})
</script>

<style scoped lang="scss">
@import url("../index.scss");
</style>
